<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- v-for循环 -->
				<!-- 循环时,把循环的值赋值给前的变量n使用,使用时用{{n}} -->
				<!-- <li v-for="n in nums"> -->
					<!-- (n,i)in nums 注意数据n和i是有顺序的要求  ,逗号前面是数组值,后面是下标 -->
				<li v-for="(n,i) in nums">
					{{n}}--{{i}}
				</li>
				<table border="1">
					<tr>
						<th>姓名</th>
						<th>性别</th>
						<th>年龄</th>
					</tr>
					
					<tr v-for="s in stuList">
						<td>{{s.name}}</td>
						<td>{{s.sex}}</td>
						<td>{{s.age}}</td>
					</tr>
				</table>
			</ul>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					nums:[10,20,30,40,50,60],
					stuList:[
					   {
					   	name:"张三",
						sex:"男",
						age:18
					   },
					    {
					   	name:"李四",
						sex:"女",
						age:19
					   },
					    {
					   	name:"王五",
						sex:"男",
						age:20
					   }
					]
				}
			})
		</script>
	</body>
</html>
